<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>报表平台-发布报表列表</title>
	<style>
	    *{
	    	padding: 0;
	    	margin: 0;
	    }

	    body {
	        font-family: 微软雅黑;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333;
        }

		.header{
            height: 40px;
            background: -moz-linear-gradient(#4698e9, #0167cc);
            background: -webkit-linear-gradient(#4698e9, #0167cc);
            background: -o-linear-gradient(#4698e9, #0167cc);
            background: -ms-linear-gradient(#4698e9, #0167cc);
            background: linear-gradient(#4698e9, #0167cc);
            background: progid: DXImageTransform . Microsoft . gradient(startColorstr = '#4698E9', endColorstr = '#0167CC', GradientType = 0);
            background-color: #4698e9;
            border-bottom: 1px solid #FFF;
            color: #fff;
            line-height: 40px;
            text-align: center;
		}

		.main {
			width: 80%;
			margin: 20px auto;
		}

		.table-bordered {
            border: 1px solid #ddd;
        }

        .table {
            width: 100%;
            max-width: 100%;
            margin-bottom: 20px;
        }

        table {
            background-color: transparent;
        }

        table {
  			border-spacing: 0;
  			border-collapse: collapse;
		}

        thead {
            display: table-header-group;
            vertical-align: middle;
            border-color: inherit;
        }

        .table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th {
            border-top: 0;
        }

		.table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
		    border-bottom-width: 2px;
		}

		.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
		  border: 1px solid #ddd;
		}

		.table>thead>tr>th {
		  vertical-align: bottom;
		  border-bottom: 2px solid #ddd;
		}

		.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
		  padding: 8px;
		  line-height: 1.42857143;
		  vertical-align: top;
		  border-top: 1px solid #ddd;
		}

		th {
		  text-align: left;
		}

		table a {
			text-decoration: none;
			color: #4698e9;
		}

	</style>
</head>
<body>
    <div class="header">
    	<h2>发布报表列表</h2>
    </div>
    <div class="nav-placeholder"></div>
    <div class="main">
    	<table class="table table-bordered" id="list-table">
    		<caption></caption>
    		<thead>
    			<tr>
    				<th>编号</th>
    				<th>名称</th>
    				<th>操作</th>
    			</tr>
    		</thead>
    		<tbody>
    			<tr>
    			</tr>
    		</tbody>
    	</table>
    </div>
    <script src="dep/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    (function ($) {
	    $.ajax({
            url: '/silkroad/reports/online',
            type: 'POST',
            success: function (data) {
            	if (data.status === 0) {
            		render(data);
            	}                
            }
        });

        var render = function (data) {
	    	var tableEl = document.getElementById('list-table');
	    	var bodyEl = tableEl.getElementsByTagName('tbody')[0];
	    	var str = '';

	    	if (data.status === 0) {
	    		var d = data.data;
	    		var len = d.length;	    		
	    		var url = '';
	    		for(var i = 0; i<len; i++) {
	                url = '/silkroad/reports/'+ d[i].id +'/report_vm?token=' + d[i].token;
	    			str += '<tr><td>'+ (i+1) +'</td><td>'+ d[i].name +'</td><td><a href="'+url +'" target="_blank">查看</a></td></tr>'
	    		}
	    	} else {
	    		str = "暂时没有数据！";
	    	}

	    	bodyEl.innerHTML = str;
        }
    })(jQuery);
    </script>
</body>
</html>